<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="B2B电商平台" name="description" />
<meta content="B2B电商平台" name="keyword" />

<title>B2B电商平台.商品评价详细信息</title>
<link rel="icon" href="include/images/icss.ico" type="image/x-icon" />
<link rel="shortcut icon" href="include/images/icss.ico"
	type="image/x-icon" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/include/css/global.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/include/css/style.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/include/css/pro.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/include/css/proManage.css" />
<link rel="stylesheet"
	href="<%=path%>/include/JQuery ui/css/smoothness/jquery-ui-1.7.3.custom.css"
	type="text/css"></link>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/include/pagination/page.css" media="all">

<link rel="stylesheet" type="text/css"
	href="<%=path%>/include/css/mmt_trading.css" />
<script type="text/javascript"
	src="<%=path%>/include/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=path%>/include/js/cookies.js"></script>
<script type="text/javascript" src="<%=path%>/include/js/icss.busin.js"></script>
<script type="text/javascript"
	src="<%=path%>/include/JQuery ui/js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="<%=path%>/include/js/icss.common.js"></script>
<script type="text/javascript"
	src="<%=path%>/include/pagination/jquery.pagination.js"></script>
<script type="text/javascript"
	src="<%=path%>/include/pagination/init.js"></script>
<script type="text/javascript" src="<%=path%>/include/js/doT.min.js"></script>
<script src="<%=path%>/include/DatePicker/WdatePicker.js"
	charset="UTF-8" type="text/javascript"></script>
<style type="text/css">

.evalUl{
	margin: 0px;
	width: 100%;
	height: auto;
}

.evalLi{
	padding: 10px;
	border-bottom: 1px solid;
	border-bottom-color: #D4D4D4;
	height: auto;
	min-height:90px;
}

.replyUl{
	width: 95%;
}
.replyToReplyUl{
	width: 95%;
}

.replyUl li{
	padding: 5px;
	border-bottom: 1px solid;
	border-bottom-color: #D4D4D4;
	font-size: 14px;
    line-height: 1.4;
}

.userNameDiv{
	width: 100%;
	margin-top: 10px;
	font-weight: bold;
}

.evalDateDiv{
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 12px;
    color: #B0B0B0;
}

.evalContentDiv{
	font-size: 14px;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
	$(function(){
		_search();
	});

	var pagination;
	function _search() {
		var url = "<%=path%>/productEval/getEvalList.do";
		var data = {
			productId : $("#productId").val()
		};
		pagination = _initPagination({
			'pageId' : 'pagination',
			'url' : url,
			'data' : data,
			'rows' : 5,
			'callback' : _initDataList
		});
	}

	function _initDataList(data) {
		var d = data.rows;
	 	var total = data.total;
		var str = "";
		$("#evalList").empty();
		for(var i=0;i<d.length;i++){//评价
			var reply=d[i].replylist;
			if(d[i].evalType=='3'&&d[i].evalContent!=''){
				str += "<li class='evalLi'>";
				str += "	<div style='width: 15%;float: left;text-align: center;'  >";
				str += "		<div style='width: 100%;height: 60px; ' align='	center'>";
				str += "			<img src='"+d[i].headImgUrl+"' width='50' height='50' alt='' resizeimg='true' onmousedown='' onerror='javascript:this.src=\"<%=path%>/download/error/nopicture.jpg\";' style='width: 60px; height: 60px;'>";
				str += "		</div>";
				str += "		<div class='userNameDiv'>"+d[i].userName+"</div>";
				str += "	</div>";
				str += "	<div style='width: 85%;padding-left: 15%;height: auto;display: block; '>";
				str += "		<div class='evalContentDiv'>"+d[i].evalContent+"</div>";
				str += "		<div class='evalDateDiv'>"+d[i].evalTime+"</div>";
				if(reply.length>0){
					str += "	<ul class='replyUl'>";
					for(var j=0;j<reply.length;j++){//评价的回复
						var replyToReply=reply[j].replyToReplyList;
						if(reply[j].replyType=='1'){
							str += "<li><span style='font-size: 12px;color: gray;'>[掌柜回复] </span><span style='font-size: 12px;color: blue;'>"+reply[j].replyUserName+"</span> <span style='font-size: 12px;'>回复</span> <span style='font-size: 12px;color: blue;'>"+reply[j].wasRerplyName+"</span> : "+reply[j].replyContent+"</li>";
						}else if(reply[j].replyType=='2'){
							str += "<li><span style='font-size: 12px;color: gray;'>[追加评论] </span>"+reply[j].replyContent+"</li>";
						}else{
							str += "<li><span style='font-size: 12px;color: blue;'>"+reply[j].replyUserName+"</span> <span style='font-size: 12px;'>回复</span> <span style='font-size: 12px;color: blue;'>"+reply[j].wasRerplyName+"</span> : "+reply[j].replyContent+"</li>";
						}
						str	= sortReply(str,replyToReply);
						
					}
					str += "	</ul>";
				}
				str += "	</div>";
				str += "</li>";
			}
		
		}
		
		$("#evalList").append(str);
		setTimeout(function(){_reHeight("rightFrame","contentDiv");},1000);
	}
	
	//递归排序所有回复
	function sortReply(str,reply){
		if(reply.length>0){
			str += "	<ul class='replyToReplyUl'>";
			for(var i=0;i<reply.length;i++){
				var replyToReply=reply[i].replyToReplyList;
				
				if(reply[i].replyType=='1'){
					str += "<li><span style='font-size: 12px;color: gray;'>[掌柜回复] </span><span style='font-size: 12px;color: blue;'>"+reply[i].replyUserName+"</span> <span style='font-size: 12px;'>回复</span> <span style='font-size: 12px;color: blue;'>"+reply[i].wasRerplyName+"</span> : "+reply[i].replyContent+"</li>";
				}else if(reply[i].replyType=='2'){
					str += "<li><span style='font-size: 12px;color: gray;'>[追加评论] </span>"+reply[i].replyContent+"</li>";
				}else{
					str += "<li><span style='font-size: 12px;color: blue;'>"+reply[i].replyUserName+"</span> <span style='font-size: 12px;'>回复</span> <span style='font-size: 12px;color: blue;'>"+reply[i].wasRerplyName+"</span> : "+reply[i].replyContent+"</li>";
				}
				
				if(replyToReply.length>0){
					console.log(replyToReply);
					str=sortReply(str,replyToReply);
				}
			}
			str += "	</ul>";
		}
		return str;
	}

	
</script>
</head>

<body style="font-family: '微软雅黑';">
	<div id="contentDiv" style="padding:4px; width:99%;">
		<div class="colnums-2-ab-b" style="overflow-x:auto;">
		<div class="toptil" style="font-size: 16px;">
					商品评价详细信息
		</div>
		<input type="hidden" id="productId" name="productId" value="${productId }"/>
		<div style="height: 150px;">
			<div style="width: 30%;height: 100%;float: left;" align="center">
					<img src='${productInfo.productPic}' alt='' resizeimg='true' onmousedown='' onerror='javascript:this.src="<%=path%>/download/error/nopicture.jpg"' style='width:100%;height:100%;' >
			</div>
			<div style="width: 70%;height: 100%;float: left;">
				<table style="width: 100%;border-collapse: separate;border-spacing: 10px;height: 100%;">
					<tr>
						<td colspan="2" style="padding-left: 10px;font-size: 15px;font-weight: bold;">${productInfo.productName }</td>
					</tr>
					<tr>
						<td style="width: 15%;color: gray;">价格</td>
						<td>${productInfo.productPrice}</td>
					</tr>
					<!--<tr>
						<td style="width: 15%;color: gray;">商品类别</td>
						<td></td>
					</tr>  -->
					<c:if test="${productInfo.upStatus eq '1'}">
					<tr>
						<td style="width: 15%;color: gray;">上架时间</td>
						<td>${productInfo.upTime }</td>
					</tr>
					</c:if>
					<c:if test="${productInfo.upStatus eq '0'}">
					<tr>
						<td style="width: 15%;color: gray;">下架时间</td>
						<td>${productInfo.downTime }</td>
					</tr>
					</c:if>
				</table>
			</div>
		</div>
		<div  style="border: 1px solid #e0e0e0;background: #f5f5f5;padding-left:10px;height: 40px;line-height: 40px;font-size:14px;font-weight: bold;">
			商品评价
		</div>
		<div style="width: 100%;height: auto;">
			<ul id="evalList" class="evalUl" >
				
			</ul>
		</div>
		<div class="dataTables_paginate paging_full_numbers">
			<span id="innerHtml"> </span>
		</div>
		<div id="pagination"></div>
		<div>
			<div style="height: 30px;"></div>
				<!-- 分类列表div结束 -->
			<div class="clear"></div>
		</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		_reHeight("rightFrame", "contentDiv");
	});
</script>

</html>
